<template>
	<view class="">
		<view>
			<view v-for="(goods,index) in item.goods" :key="index" class="">
				<view class="">
					<view class="white-bg padding-bj">
						<view v-for="(goods,index1) in item.goods" :key="index1" class="">
							<view class="u-flex wanl-cart-goods" style="align-items: stretch;">
								<view class="picture" @tap="onGoods(goods.goods_id)">
									<image :src="$wanlshop.oss(goods.image, 100, 100, 1)" mode="aspectFill"
										class="picture">
									</image>
								</view>

								<view class="content u-flex-col u-row-between u-m-l-16 u-flex-1"
									style="align-items: stretch; ">
									<view class="u-flex-col info u-row-between u-flex-1">
										<view class=" u-flex u-col-top">
											<view class=" wanl-gray-dark title u-line-2 u-font-48 "
												@tap="onGoods(goods.goods_id)">
												{{ goods.title }}
											</view>

											<view class="u-flex u-row-right u-flex-1 wanl-gray u-flex price value"
												style="align-items: baseline;" @tap="onGoods(goods.goods_id)">
												<view>￥</view>
												<view class="value u-font-xl4">{{ goods.price }}</view>
											</view>

										</view>

										<view class="u-flex u-col-top ">
											<view class=" wanl-gray-dark title u-line-2 u-font-48 "
												@tap="onGoods(goods.goods_id)">
												{{ goods.difference }}
											</view>

											<view
												class=" wanl-gray-dark u-flex price value u-flex u-row-right u-flex-1 wanl-gray"
												style="align-items: baseline;" @tap="onGoods(goods.goods_id)">
												<view>x</view>
												<view class="value u-font-xl4">{{ goods.number }}</view>
											</view>
										</view>

										<view class="u-flex u-row-right">
											<view class="">实付:</view>
											<view class=" wanl-gray-dark wanl-orange u-flex price value"
												style="align-items: baseline;">
												<view>￥</view>
												<view class="value u-font-xl4">{{ goods.actual_payment }}</view>
											</view>
										</view>

									</view>
								</view>
							</view>
						</view>
					</view>

					<view class="white-bg padding-bj u-m-t-24">
						<view class="address-wrap white-bg">
							<view class="item">
								<view class="title">收货人:</view>
								<view class="value">{{ item.name }}
									{{ item.mobile.slice(0,3) + "****" + item.mobile.slice(7,11) }}
								</view>
							</view>
							<view class="item">
								<view class="title">收货地址:</view>
								<view class="value">{{ item.address }}</view>
							</view>
							<view class="item">
								<view class="title">备注:</view>
								<view class="value">{{ item.remarks ? item.remarks : '无'}}</view>
							</view>
						</view>

						<view class="time-wrap u-flex white-bg">
							<view class="item">
								<view class="title">订单编号:</view>
								<view class="value">{{ item.order_no }}</view>
							</view>

							<view class="item">
								<view class="title">下单时间:</view>
								<view class="value">{{ item.createtime_text }}</view>
							</view>
						</view>
					</view>

					<view class="white-bg u-m-t-24 padding-bj transparent-wrap">
						<view class="title">货运信息</view>
						<view class="item">
							<view class="title">物流方式:</view>
							<view class="value">
								<u-radio-group v-model="transport_item.freight_id">
									<u-radio v-for="(item, index2) in list" :key="index2" :name="item.name">
										{{item.label}}
									</u-radio>
								</u-radio-group>
							</view>
						</view>

						<view class="item" v-if="transport_item.freight_id == 31">
							<view class="title">送货方式:</view>
							<view class="value">
								<u-radio-group v-model="transport_item.type">
									<u-radio v-for="(item, index3) in typeList" :key="index3" :name="item.name">
										{{item.label}}
									</u-radio>
								</u-radio-group>
							</view>
						</view>
						<view class="item" v-if="transport_item.freight_id == 28">
							<view class="title">物流编号:</view>
							<view class="value">
								<input placeholder="请输入物流编号" v-model="transport_item.express_no" class="u-text-right"
									placeholder-class="placeholder"></input>
							</view>
						</view>
						<view class="item" v-if="transport_item.freight_id == 28">
							<view class="title">货运网点:</view>
							<view class="value">
								<input placeholder="请输入货运网点" v-model="transport_item.name" class="u-text-right"
									placeholder-class="placeholder"></input>
							</view>
						</view>
						<view class="item" v-else>
							<view class="title">联系人:</view>
							<view class="value">
								<input placeholder="请输入送货司机姓名" v-model="transport_item.name" class="u-text-right"
									placeholder-class="placeholder"></input>
							</view>
						</view>
						<view class="item">
							<view class="title">联系电话:</view>
							<view class="value">
								<input placeholder="请输入联系电话" v-model="transport_item.mobile" class="u-text-right"
									placeholder-class="placeholder"></input>
							</view>
						</view>
						<view class="item">
							<view class="title">货物:</view>
							<view class="value">
								<input placeholder="请输入货物" v-model="transport_item.goods" class="u-text-right"
									placeholder-class="placeholder"></input>
							</view>
						</view>
						<view class="item">
							<view class="title">车牌号:</view>
							<view class="value">
								<input placeholder="请输入车牌号" v-model="transport_item.car" class="u-text-right"
									placeholder-class="placeholder"></input>
							</view>
						</view>
						<view>
							<view class="item u-flex-col">
								<view class="title">上传回单</view>
								<view class="value">
									<view class="grid  grid-square flex-sub">
										<view class="bg-img border" v-if="transport_item.images">
											<image :src="$wanlshop.oss(transport_item.images, 90, 90)" mode="aspectFill"
												@click="previewImage(item.images)"></image>
											<view class="cu-tag bg-red" @tap.stop="delImg('images')">
												<text class="wlIcon-31guanbi"></text>
											</view>
										</view>
										<view class="bg-img dashed border" @tap="chooseImage('images')"
											v-if="!transport_item.images">
											<text class="wlIcon-31paishe"></text>
										</view>
									</view>
								</view>
							</view>

						</view>
					</view>
				</view>
			</view>
		</view>
			<view @click="submit" class="btns">
				<view class="btn main-btn m-shop btn-color">立即发货</view>
			</view>
		<view v-show="false">{{ ts }}</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				item: {},
				transport_item: {
					freight_id: 0,
					type: 1,
					name: '',
					mobile: '',
					goods: '',
					car: '',
					images: '',
					express_no: ''
				},
				order_id: 0,
				ts: 0,
				list: [{
						label: '到店自取',
						name: 28,
					},
					{
						label: '正常配送',
						name: 32,
					},
					{
						label: '立即配送',
						name: 31,
					}
				],
				typeList: [{
						label: '商家自送',
						name: 1,
					},
					{
						label: '货拉拉',
						name: 2,
					}
				],
			};
		},
		computed: {},
		onLoad(options) {
			if (options.id) {
				this.order_id = options.id;
			}
			this.loadData(options.id);
		},
		onPullDownRefresh() {},
		onNavigationBarButtonTap(e) {},
		onReachBottom() {},
		methods: {
			async loadData(id) {
				this.$api.post({
					data: {
						id: id,
					},
					url: '/store/order/orderDetail',
					success: res => {
						this.item = res
						this.transport_item['freight_id'] = res.freight_id
					}
				});
			},

			submit() {
				let data = this.transport_item;
				if (data.freight_id == 28) {
					data['express_name'] = 'huoyun';
				} else if (data.freight_id == 31) {
					data['express_name'] = 'ziyingpeisong';
				} else if (data.freight_id == 32) {
					data['express_name'] = 'zhengchangpeisong';
				}
				data['id'] = this.order_id;
				let images = data.images;
				data['images'] = images
				// data['images'] = [data.images]
				this.$api.post({
					data: data,
					url: '/store/order/delivery',
					success: res => {
						this.$wanlshop.msg('发货成功')
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 1500)
					}
				});
			},
			chooseImage(key) { //选择图片
				console.log('--')
				let that = this
				uni.chooseImage({
					sourceType: ["camera", "album"],
					sizeType: "compressed",
					count: 1,
					success: res => {
						this.$api.get({
							url: '/wanlshop/common/uploadData',
							success: updata => {
								for (let i = 0; i < res.tempFilePaths.length; i++) {
									// 读取图片宽高
									uni.getImageInfo({
										src: res.tempFilePaths[i],
										success: image => {
											this.$api.upload({
												url: updata.uploadurl,
												filePath: image.path,
												name: 'file',
												formData: updata.storage ==
													'local' ? null : updata
													.multipart,
												success: data => {
													if (key ==
														'images') {
														this.transport_item
															.images =
															data.url
													}
													this.updateView()
												}
											});
										}
									});
								}
							}
						});
					}
				})
			},
			previewImage(image) {
				var imgArr = [];
				imgArr = imgArr.concat(this.$wanlshop.oss(image, 500));
				uni.previewImage({
					urls: imgArr,
					current: imgArr[0],
					indicator: 'number'
				});
			},
			delImg(key) {
				if (key == 'images') {
					this.item.images = ''
				}
				this.updateView()
			},
			updateView() {
				this.ts = (new Date()).getTime()
			}
		},
	};
</script>
<style lang="scss" scoped>
	@import "@/all.scss";
	.btns{
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		margin: 0 24rpx;
		background: #ffffff;
	}
	.wanl-cart-goods {
		background-color: #ffffff;

		.picture {
			width: 180rpx;
			height: 180rpx;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
		}

		.content {
			.title {
				font-size: 24rpx;
			}

			.price {
				font-size: 24rpx;

				.value {
					font-size: 32rpx;
				}
			}
		}
	}


	.info {
		// justify-content: start !important;f

		.title {
			width: 70%;
			flex: 0 0 auto;
		}

		>.value {
			margin-left: 16rpx;
		}
	}

	.address-wrap,
	.time-wrap {
		.item {
			display: flex;

			.title {}

			.value {
				flex: 1;
			}
		}
	}

	.time-wrap {
		font-weight: 500;
		font-size: 20rpx;
		color: #757575;
		justify-content: space-between;

		.item {
			justify-content: space-between;
		}
	}

	.address-wrap {
		font-weight: 500;
		font-size: 24rpx;
		color: #757575;
	}

	.transparent-wrap {
		.item {
			display: flex;
			padding: 16rpx 0;

			&:not(.u-flex-col) .value {
				margin-left: 16rpx;
			}

			&.u-flex-col .value {
				margin-top: 16rpx;
			}
		}

		.value {
			flex: 1;


			width: 100%;

		}

		font-weight: 500;
		font-size: 28rpx;
		color: #333333;
		line-height: 40rpx;
	}

	::v-deep .u-radio-group .u-radio .u-radio__label {
		margin-right: unset !important;

	}

	::v-deep .transparent-wrap .u-radio-group {
		width: 100%;
		justify-content: space-between;

		&::after {
			content: unset;
		}
	}

	.grid {
		.item {
			padding: 20rpx;
			border-radius: 20rpx;
			background: #D9E3FE;

			&:not(:nth-child(3n+1)) {
				margin-left: 16rpx;
			}

			&:not(:nth-child(-n+3)) {
				margin-top: 16rpx;
			}

			width: calc((100% - 32rpx)/3);

			font-weight: 500;
			font-size: 24rpx;
			color: #757575;
			line-height: 34rpx;

			.value {
				font-weight: 700;
				font-size: 32rpx;
				color: #333333;
				line-height: 46rpx;
			}
		}
	}

	.bg-img {
		width: 180rpx;
		height: 180rpx;
	}

	.border {
		border: 2px solid #DDDDDD;
		border-radius: 12rpx;
	}
</style>